<!DOCTYPE html>
<html class="preload" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
    <link rel="manifest" href="manifest.json">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta http-equiv="X-UA-Compatibility" content="IE=Edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Jellyfin">
    <meta name="robots" content="noindex, nofollow, noarchive">
    <meta name="referrer" content="no-referrer">

    <meta id="themeColor" name="theme-color" content="#202020">

    <link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">

    <!-- iPhone 5 -->
    <link href="assets/splash/iphone5_splash.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphone5_splash_l.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPhone 6, 6S, 7 and 8 -->
    <link href="assets/splash/iphone6_splash.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphone6_splash_l.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPhone 6+, 7+ and 8+ -->
    <link href="assets/splash/iphoneplus_splash.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphoneplus_splash_l.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPhone X -->
    <link href="assets/splash/iphonex_splash.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphonex_splash_l.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPhone Xr -->
    <link href="assets/splash/iphonexr_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphonexr_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPhone Xs -->
    <link href="assets/splash/iphonexsmax_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/iphonexsmax_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPad -->
    <link href="assets/splash/ipad_splash.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/ipad_splash_l.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPad Pro 1 -->
    <link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPad Pro 3 -->
    <link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <!-- iPad Pro 2 -->
    <link href="assets/splash/ipadpro2_splash.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
    <link href="assets/splash/ipadpro2_splash_l.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />

    <link rel="shortcut icon" href="favicon.ico">
    <meta name="msapplication-TileImage" content="touchicon144.png">
    <meta name="msapplication-TileColor" content="#333333">

    <title>Jellyfin</title>

    <style>
        .transparentDocument,
        .backgroundContainer-transparent:not(.withBackdrop) {
            background: none !important;
            background-color: transparent !important;
        }

        .layout-tv .mouseIdle,
        .layout-tv .mouseIdle button,
        .layout-tv .mouseIdle select,
        .layout-tv .mouseIdle input,
        .layout-tv .mouseIdle textarea,
        .layout-tv .mouseIdle a,
        .layout-tv .mouseIdle label,
        .transparentDocument .mouseIdle,
        .transparentDocument .mouseIdle button,
        .transparentDocument .mouseIdle select,
        .transparentDocument .mouseIdle input,
        .transparentDocument .mouseIdle textarea,
        .transparentDocument .mouseIdle a,
        .transparentDocument .mouseIdle label,
        .screensaver-noScroll.mouseIdle,
        .screensaver-noScroll.mouseIdle button,
        .screensaver-noScroll.mouseIdle select,
        .screensaver-noScroll.mouseIdle input,
        .screensaver-noScroll.mouseIdle textarea,
        .screensaver-noScroll.mouseIdle a,
        .screensaver-noScroll.mouseIdle label {
            cursor: none !important;
        }

        .preload {
            background-color: #101010;
        }

        .hide,
        .mouseIdle .hide-mouse-idle,
        .mouseIdle-tv .hide-mouse-idle-tv {
            display: none !important;
        }

        .mainDrawerHandle {
            position: fixed;
            top: 0;
            bottom: 0;
            z-index: 1;
            width: 0.8em;
            padding-left: env(safe-area-inset-left);
            caret-color: transparent;
        }

        [dir="ltr"] .mainDrawerHandle {
            left: 0;
        }

        [dir="rtl"] .mainDrawerHandle {
            left: 0;
        }

        @keyframes fadein {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .splashLogo {
            animation: fadein 0.5s;
            width: 30%;
            height: 30%;
            background-image: url(assets/img/icon-transparent.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @media screen
            and (min-device-width: 992px) {
            .splashLogo {
                background-image: url(assets/img/banner-light.png);
            }
        }
    </style>
</head>
<body dir="ltr">
    <div id="reactRoot">
        <div class="splashLogo"></div>
    </div>
</body>
</html>
